<template>
	<div>
		<n-space>
			<n-select
				v-model:value="classId"
				:options="grades"
				label-field="name"
				value-field="id"
				placeholder="请选择班级"
				filterable/>
			<n-button type="primary" @click="showImport">
				<template #icon>
					<n-icon>
						<icon-document />
					</n-icon>
				</template>
				导入学生信息
			</n-button>
		</n-space>
		<n-button v-if="showImportRef.tableData.length > 0" class="save" type="success" @click="save">保存</n-button>
		<n-data-table
			bordered
			:data="showImportRef.tableData"
			:columns="api.createImportColumns()"/>
		<n-modal
			style="width: 500px;"
			v-model:show="showImportRef.value"
			title="导入学生信息"
			preset="card"
			draggable>
			<n-space vertical>
				<a href="/static/file/student.xls">下载模版</a>
				<wy-upload :changeFile="file => { api.changeFile(file, showImportRef) }" />
			</n-space>
		</n-modal>
	</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import WyUpload from '@@/upload'
import api from '@/data/student'
import IconDocument from '@@/icons/plus'
import { useMessage, useDialog } from 'naive-ui'
const message = useMessage()
const dialog = useDialog()
const classId = ref(null)
const grades = await api.getGrades()
const showImportRef = reactive({
	value: false,
	tableData: []
})
function showImport () {
	if (classId.value) {
		showImportRef.value = true
	} else {
		message.error('请先选择班级')
	}
}
function save () {
	dialog.warning({
		title: '导入',
		content: '确定要将所有数据导入吗？',
		positiveText: '确定',
		negativeText: '取消',
		draggable: true,
		onPositiveClick: () => {
			api.addStudents({ content: JSON.stringify(showImportRef.tableData), classId: classId.value }, showImportRef)
		}
	})
}
</script>
<style scoped lang="scss">
.save, .n-data-table {
	margin-top: 8px;
} 
</style>